<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import AppBind from "@/components/app_bind.vue";
import AppHeader from "@/components/app_header.vue";
import { useConfigStore } from "@/store/modules/config";

const useConfig = useConfigStore();
const { locale } = useI18n();
const isShow = ref(false);
const router = useRouter();

const ToPledge = () => {
  if (!useConfig.account || !useConfig.referrerAddress) return;
  router.push("pledge");
};
const ToRevenue = () => {
  if (!useConfig.account || !useConfig.referrerAddress) return;
  router.push("revenue");
};

const ToTransaction = () => {
  if (!useConfig.account || !useConfig.referrerAddress) return;
  router.push("transaction");
};
const ToPanel = () => {
  if (!useConfig.account) return;
  router.push("panel");
};
//
</script>

<template>
  <div class="home div-container">
    <!-- header--start-->
    <div class="div-header">
      <!--      <div class="div-left">-->
      <!--        <img src="@/assets/icon-black.png" alt="" />-->
      <!--      </div>-->
      <span class="title">
        <img src="@/assets/icon-logo.png" width="40" alt="" />
      </span>
      <!--      <div class="div-right">...</div>-->
    </div>
    <!-- header--start-->
    <!-- div-wallet--start-->
    <AppHeader />
    <!-- <div class="div-wallet">
      <div class="wallet" @click.stop="showDialog">
        <img src="@/assets/icon-wallet.png" width="32" height="32" alt="" />
        {{ $t("home.linkWallte") }}
      </div>
      <div class="div-change" @click="changeLang">
        <img src="@/assets/icon-change.png" width="19" height="19" alt="" />
        {{ $t("home.ch") }}
      </div>
    </div> -->
    <!-- div-wallet--end-->
    <!--div-out-link-start-->
    <AppBind />
    <!--div-out-link-end-->
    <!--  更多功能-->
    <div class="more-tools" style="margin-top: 22px">
      <div class="div-content">
        <h6>{{ $t("home.moreTools") }}</h6>
        <div class="div-list">
          <div class="div-list-item" @click.stop="ToPledge">
            <img src="./../../assets/icon-tools-1.png" width="46px" alt="" />
            <div>
              <p class="title">{{ $t("home.equity") }}</p>
              <p class="desc">{{ $t("home.equityDes") }}</p>
            </div>
          </div>
          <div class="div-list-item active" @click.stop="ToTransaction">
            <img src="./../../assets/icon-tools-2.png" width="46px" alt="" />
            <div>
              <p class="title">{{ $t("home.C2C") }}</p>
              <p class="desc">{{ $t("home.C2CDesc") }}</p>
            </div>
          </div>
          <div class="div-list-item" @click.stop="ToRevenue">
            <img src="./../../assets/icon-tools-3.png" width="46px" alt="" />
            <div>
              <p class="title">{{ $t("home.income") }}</p>
              <p class="desc">{{ $t("home.incomeDesc") }}</p>
            </div>
          </div>

          <div class="div-list-item" @click.stop="ToPanel">
            <img src="./../../assets/icon-tools-4.png" width="46px" alt="" />
            <div>
              <p class="title">{{ $t("home.dataReport") }}</p>
              <p class="desc">{{ $t("home.dataReportDesc") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "./../../styles/mixin.less";
.div-header {
  justify-content: center;
}
p {
  margin: 0px;
}
.home {
  font-size: 14px;
  color: #ffffff;
}
// .div-wallet {
//   height: 44px;
//   padding: 0 14px;
//   display: flex;
//   font-size: 14px;
//   justify-content: space-between;
//   & > div {
//     display: flex;
//     align-items: center;
//     gap: 10px;
//   }
//   .wallet {
//     padding-left: 10px;
//     padding-right: 10px;
//     border-radius: 20px;
//     border: 1px solid #9cb3bf;
//   }
// }

.more-tools {
  width: 100%;
  background-image: url("./../../assets/icon-home_bg.png");
  background-repeat: no-repeat;
  background-position: 26px 0;
  background-size: 82% auto;
  padding-top: 26px;
}
.div-content {
  margin: 0px 14px;
  background: rgba(39, 40, 62, 0.5);
  border-radius: 20px;
  border: 1px solid #3e436d;
  opacity: 0.99;
  padding: 20px 16px 30px;
  h6 {
    font-size: 18px;
    color: #e5f0f4;
    margin: 0;
    margin-bottom: 6px;
  }
  .div-list-item {
    margin-top: 18px;
    background: #3a3c4f;
    border-radius: 20px;
    height: 86px;
    display: flex;
    align-items: center;
    padding-left: 22px;
    padding-right: 22px;
    gap: 20px;
    &.active {
      background: radial-gradient(
        135% 97% at 11% 76%,
        #c172ff 0%,
        #c172ff 0%,
        #08e6f8 100%
      );
      .title {
        color: #151d24;
      }
      .desc {
        color: #51565b;
      }
    }
    img {
      width: 46px;
      height: 46px;
    }
    .title {
      font-weight: 500;
      font-size: 18px;
      color: #e5f0f4;
      line-height: 26px;
    }
    .desc {
      color: #828b92;
      font-weight: 500;
      font-size: 12px;
      line-height: 20px;
    }
  }
}
</style>
